<template>
    <div>
        <div class="view-button">
            <Button v-show="hasButtonPermission('101010101')" type="primary" @click="reloadMenu">更新</Button>
           <!-- <Button type="primary" @click="updateTree">更新</Button>-->
        </div>
        <div class="view-box">
            <Row>
            <!--<div class="view-box-left">
                <Col span="3.5">
                    <Tree :data="dataTree"></Tree>
                </Col>
            </div>-->
            <div class="view-box-right">
                <Col span="20.5">
                    <div class="view-div">
                        <FunctionTree></FunctionTree>
                    </div>
                </Col>
            </div>
            </Row>
        </div>
        <Spin size="large" fix v-if="spinShow">加载中...</Spin>
    </div>
</template>


<script>
    import FunctionTree from './modal/functionTree.vue'
    import { getfunMenuApi , getReloadMenuApi} from '../../http/functionView.api'

    export default {
        name: 'functionView',
        components: {
            FunctionTree
        },
        data() {
            return {
                spinShow: false,
                dataTree: []
            }
        },
        created() {
           /* this.updateTree()*/
        },
        methods: {
            hasButtonPermission(permission) {
                return this.$store.getters['login/hasButtonPermission'](permission);
            },
            updateTree() {
                this.spinShow = true
                getfunMenuApi().then(suc => {
                    let dataTree = suc.data.result[0].menuLists.map((item) => ({
                        title: item.name,
                        expand: true,
                        children: item.menuLists.map((item) => ({title: item.name})),
                        originVal: item
                    }))
                    this.dataTree[0].children = dataTree
                    this.spinShow = false
                }).catch(err => {
                    this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                    this.spinShow = false
                })
            },

            reloadMenu() {

                getReloadMenuApi().then(suc => {
                    function buildTree(tree) {
                        return {
                            title: tree.name,
                            expand: true,
                            children: tree.menuLists.map((item) => getNode(item))
                        }
                    }
                    function  getNode(item) {
                        let obj = {
                            title: item.name,
                            expand: true,
                            originVal: item
                        };
                        if (item.menuLists&&item.menuLists.length) {
                            obj.children = item.menuLists.map((item1) => getNodes(item1)); //getNode(item1)没有二级菜单
                        }
                        return obj;
                    }
                    //有二级菜单
                    function  getNodes(item1) {
                        let obj = {
                            title: item1.name,
                            expand: true,
                            originVal: item1
                        };
                        if (item1.menuItems&&item1.menuItems.length) {
                            obj.children = item1.menuItems.map((item2) => ({title: item2.name+(item2.desc?"（"+item2.desc+"）":"")}));
                        }
                        return obj;
                    }
                    this.dataTrees = suc.data.result.map(tree => buildTree(tree))
                    this.spinShow = false
                }).catch(err => {
                    this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                    this.spinShow = false
                })
            }
        }
    }
</script>
